<template>
  <div class="checkSheep">
    <div class="left">
      <div class="b1" v-for="(item, index) in navs1" :key="item.id" :class="{ on: currentNav1 === index }">
        <div class="left_l" @click="currentNav1 = index" :class="{ on: currentNav1 === index }">
          <img src="@/assets/img/check.png" alt="" class="bian" :class="{ on: currentNav1 === index }" />
          <div>
            <p>{{ item.name }}</p>
            <p>({{ item.count }})</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cen">
      <div
        class="b1"
        @click="currentNav2 = index"
        v-for="(item, index) in data2"
        :key="item.id"
        :class="{ on: currentNav2 === index }"
      >
        <div class="left_l" style="background: #fff">
          <div>
            <p>{{ item.name }}</p>
            <p>({{ item.count }})</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="info_item" :class="{ on: item.check }" v-for="item in data3" :key="item.id" @click="goInfo(item.id)">
        <div class="sex" :class="{ on: item.sex === '公' }">{{ item.sex }}</div>
        <p>{{ item.earLabelNo }}</p>
        <div>项圈号: {{ item.necklaceNo }}</div>
        <div>月龄：{{ item.monthNum }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { List, Checkbox, CheckboxGroup } from 'vant'
import { query4Select } from '@/api/record'
import { setValue } from '@/utils/auth'

export default {
  components: {
    [List.name]: List,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup
  },
  name: 'CheckSheep',
  data() {
    return {
      navs1: [],
      navs2: [],
      navs3: [],
      data2: [],
      data3: [],
      loading: true,
      finished: true,
      checkAll: false, // 是否全选
      currentNav1: null, // 当前选中侧边栏
      currentNav2: 0 // 当前选中侧边栏
    }
  },
  watch: {
    currentNav1() {
      const p = this.navs1[this.currentNav1].id

      this.currentNav2 = 0
      this.data2 = this.navs2.filter(ele => {
        return ele.pid === p
      })

      if (this.currentNav2 === 0) {
        this.selectData3()
      }
    },
    currentNav2() {
      this.selectData3()
    }
  },
  created() {
    this.loadNavs()
  },
  methods: {

    async loadNavs() {
      await query4Select().then(res => {
        if (res.status === 0) {
          const datas1 = res.data.houseInfoList
          const datas2 = res.data.circleList
          const datas3 = res.data.individualInfoList
          datas3.forEach(ele => {
            ele.check = false
          })
          this.navs1 = datas1
          this.navs2 = datas2
          this.navs3 = datas3
          this.currentNav1 = 0
        }
      })
    },
    // data3数据梳理
    selectData3: function() {
      const p = this.data2[this.currentNav2].id
      this.data3 = this.navs3.filter(ele => {
        return ele.circleInfoId === p
      })
    },
    // 去档案详情
    goInfo(id) {
      setValue('sheepRecordInfoId', id)
      this.$bridge.call('archivesDetail')
    }
  }
}
</script>
<style lang='scss' scoped>

.checkSheep {
  display: flex;
  height: 100vh;
  background-color: #f7f7f7;
  .left {
    width: 108px;
    height: 100%;
    overflow-y: auto;
  }
  .cen {
    width: 108px;
    height: 100%;
    overflow-y: auto;

    background-color: #fff;
    padding: 0 12px;
    padding-right: 0;
    box-sizing: border-box;
    border-right: 1px solid #e7e7e7;
  }
  .right {
    width: calc(100vw - 216px);
    height: 100%;
    padding: 10px 20px 20px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #fff;
  }
  .info_item.on{
    border: 1px solid #37b5b5;
    background: #f5fbfb;

  }
  .info_item {
    width: 100%;
    height: 84px;
    padding: 12px 10px 10px 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #cccccc;
    background: #ffffff;

    .sex {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: #fdf1f1;
  color: #f29d9d;
  border-radius: 0px 0px 10px 0px;
}
.sex.on {
  background-color: #e1f4f4;
  color: #37b5b5;
}
    img {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }
    p {
      text-align: center;
      font-size: 14px;
      color: #333333;
    }
    div {
      font-size: 12px;
      color: #999999;

    }
  }
  .b1 {
    display: flex;
    padding: 12px 0;
    padding-right: 10px;
    box-sizing: border-box;
    color: #999999;

    .left_l.on {
      background-color: #fff;
      color: #333333;
    }
    .left_l {
      width: 100%;
      display: flex;
      align-items: center;
      background-color: #f7f7f7;
      .bian {
        width: 8px;
        height: 14px;
        opacity: 0;
      }
      .bian.on {
        opacity: 1;
      }
      div {
        width: 76px;
        p {
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .left_r {
      width: 20%;
    }
  }
  .b1.on {
    background-color: #fff;
    color: #333333;
  }
  .btn {
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #37b5b5;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  }
}
</style>
